<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>960 Grid System &mdash; Demo</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/960.css" />
<link rel="stylesheet" href="css/main.css" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.hotkeys.js"></script>
<script type="text/javascript">
var map = {};
var min_id=-1;
var max_id=-1;
$(document).ready(function() {
	$.ajaxSettings.traditional = true	
	$.getJSON('/list.json', function(data) {
        var items = [];
        $.each(data, function() {
            var cover=this.cover.substring(this.cover.lastIndexOf('/'),this.cover.length)
            //var album_id=this.album_id.substring("http://www.douban.com/photos/album/".length,this.album_id.length-1);
		items.push('<div class="grid_2"><p id="'+this.id+'"><img src="/static/cover/'+cover.substring(cover.length-5,cover.length-4)+'/' + cover + '"></p></div>');
		if(this.id > max_id){
			max_id = this.id;
		}
		if(this.id < min_id || min_id == -1){
			min_id = this.id;
		}

        });

        $('<div/>', {'class': 'container_12',html: items.join('')}).appendTo('body');
        $(".grid_2 p").click(function(){
            id = $(this).attr("id");

            if(id in map){
                delete map[id];
                $(this).removeClass("selected");
            }else{
                map[id] = 1;
                $(this).addClass("selected");
            }

        });
      });

    $("#btn").click(function(){
            var albums = [];
            for(k in map){
                albums.push(k);
            }
            $.post(
                '/update',
                {"album":albums,"min_id":min_id,"max_id":max_id},
                function(data){
			window.location.reload(true);
                }

            );
            
    });

	$(document).bind('keypress.ctrl_t', function(){
		$("#btn").trigger("click");		
	});
 });
</script>

</head>
<body>
<h1>
  <a href="http://960.gs/">960 Grid System</a>
</h1>
</body>
<div class="container_12">
	<div class="grid_2">
<input id="btn" type="button" value="Submit & Next">
	</div>
</div>
</html>
